<template>
    <div class="ep-insuredInfo" :style="{marginTop: mt === '' ? '' : mt + 'px'}">
        <div class="ep-unit">
            <div class="ep-hd">
                <span class="ep-hd-title">{{ data.aab069 }}</span>
                <span class="ep-hd-btn">
                    <el-button v-show="detailPath" type="text" icon="el-icon-search" size="medium"
                               @click="openDetail(detailPath, '单位详情')">详细查询</el-button>
                </span>
            </div>
            <div class="ep-bd">
                <el-row :gutter="20" class="ep-bd-item">
                    <el-col :span="8"><span class="ep-bd-item-list" style="width: 33%;">单位管理码：{{ data.aab999 }}</span>
                    </el-col>
                    <el-col :span="8"><span class="ep-bd-item-list"
                                            style="width: 33%;">统一社会信用代码：{{ data.bab010 }}</span>
                    </el-col>
                    <el-col :span="8"><span class="ep-bd-item-list" style="width: 33%;">单位类型：{{ data.aab019 | unitType }}</span>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="ep-bd-item">
                    <el-col :span="8"><span class="ep-bd-item-list" style="width: 33%;">所属行业：{{ data.aab022 | industry }}</span>
                    </el-col>
                    <el-col :span="8"><span class="ep-bd-item-list" style="width: 33%;">法人姓名：{{ data.aab013 }}</span>
                    </el-col>
                    <el-col :span="8"><span class="ep-bd-item-list" style="width: 33%;">联系人：{{ data.aae004 }}</span>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="ep-bd-item">
                    <el-col :span="8"><span class="ep-bd-item-list" style="width: 33%;">联系电话：{{ data.aae005 }}</span>
                    </el-col>
                    <el-col :span="16"><span class="ep-bd-item-list" style="width: 33%;">联系地址：{{ data.aae006 }}</span>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="ep-insurance">
            <div class="ep-title">当前参保险种</div>
            <ul>
                <li :style="{ backgroundColor : item === '120' ? '#0E99FF' : item === '310' ? '#4CA750' : item === '510' ? '#EC4644' : item === '410' ? '#9F85FF' : '#E5D936', marginRight: index === 1 || index === 3 ? '0' : '' }"
                    v-for="(item, index) in insurance" :key="index">
                    <i class="ep-icon"
                       :class="item === '110' || item === '120' || item === '170' ? 'ep-yl-icon' : item === '310' || item === '330' ? 'ep-jbyl-icon' : item === '510' ? 'ep-sy-icon' : item === '410' ? 'ep-gs-icon' : 'ep-sybx-icon'"></i>
                    <span>{{ item | insuranceType }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script type="es6">
    export default {
        props: {
            detailPath: {
                type: String,
                default: ''
            },
            mt: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                data: {},
                insurance: []
            }
        },
        computed: {
            companyid() {
                return this.$store.getters.companyid;
            }
        },
        watch: {
            companyid: {
                handler(value) {
                    this.getUserInformation(value);
                },
                deep: true
            }
        },
        mounted() {
            this.insurance = ['120', '310', '510', '410', '210'];
        },
        methods: {
            /**
             * 获取单位注销信息
             */
            getUserInformation(value) {
                let params = {
                    companyInfo: value
                };
                this.$api.commonPost('label', params).then(res => {
                    if (res.status === '0') {
                        this.data = res.data.panel.cpInfo || {};
                        this.insurance = ['120', '310', '510', '410', '210'];
                    } else if (res.successMessage && res.successMessage.length > 0) {
                        res.successMessage.map(item => {
                            this.$message({
                                type: 'success',
                                message: item,
                                duration: 0,
                                showClose: true
                            })
                        })
                    } else if (res.errorMessage && res.errorMessage.length > 0) {
                        res.errorMessage.map(item => {
                            this.$message({
                                type: 'error',
                                message: item,
                                duration: 0,
                                showClose: true
                            })
                        })
                    } else if (res.warnMessage && res.warnMessage.length > 0) {
                        res.warnMessage.map(item => {
                            this.$message({
                                type: 'warning',
                                message: item,
                                duration: 0,
                                showClose: true
                            })
                        })
                    }
                });
            }
        }
    }
</script>

<style lang="less" scoped>
    .ep-insuredInfo {
        display: flex;
        -webkit-transition: all .3s;
        transition: all .3s;
        border-radius: 2px;
        border: none;
        .ep-hd {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 40px;
            padding: 10px 20px;
            &-title {
                font-size: 18px;
                font-weight: 600;
            }
            &-btn {

            }
        }
        .ep-bd {
            padding: 0 20px 20px 20px;
            &-item {
                padding: 5px 0;
                font-size: 14px;
                &-lf {
                    width: 65%;
                }
                &-list {
                    width: 32%;
                }
            }
            &-unit {
                display: flex;
                align-items: center;
            }
        }
        .ep-unit {
            flex: 1;
            border-radius: 6px;
            background: #fff;
        }
        .ep-insurance {
            width: 240px;
            border-radius: 6px;
            background: #fff;
            margin-left: 10px;
            padding: 10px 10px 0 10px;
            ul {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                padding: 0;
                margin-top: 10px;
                li {
                    width: 43%;
                    border-radius: 4px;
                    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
                    font-size: 13px;
                    display: flex;
                    align-items: center;
                    padding: 5px;
                    margin: 0 10px 10px 0;
                    color: #fff;
                    span {
                        padding-left: 5px;
                    }
                }
            }
        }
        .ep-icon {
            width: 20px;
            height: 20px;
            display: inline-block;
        }
    }
</style>